<template>
    <div v-loading="loading">
        <div>
            <e-container>
                <e-module-model-box title="商品列表">
                    <div class="floor_goods_wrap clearfix">
                        <div style="margin-bottom: 20px">
                            <form action="javascript:;" @submit="searchSubmit" class="form-search">
                                <table class="jd-search">
                                    <tbody>
                                        <tr>
                                            <td class="label">游戏分类</td>
                                            <td>
                                                <p class="search-radio">
                                                    <a href="javascript:;" @click="selectRadio('youxifenlei','')" :class="{active:!search.youxifenlei}">全部</a>

                                                    <a
                                                        href="javascript:;"
                                                        v-for="r in mapyouxifenlei1"
                                                        @click="selectRadio('youxifenlei',r.id)"
                                                        :class="{active:search.youxifenlei == r.id}"
                                                        v-text="r.fenleimingcheng"
                                                    >
                                                    </a>
                                                </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="label">道具类型</td>
                                            <td>
                                                <p class="search-radio">
                                                    <a href="javascript:;" @click="selectRadio('daojuleixing','')" :class="{active:!search.daojuleixing}">全部</a>

                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '皮肤'}" @click="selectRadio('daojuleixing','皮肤')">皮肤</a>
                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '角色'}" @click="selectRadio('daojuleixing','角色')">角色</a>
                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '武器装备'}" @click="selectRadio('daojuleixing','武器装备')"
                                                        >武器装备</a
                                                    >
                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '坐骑'}" @click="selectRadio('daojuleixing','坐骑')">坐骑</a>
                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '加成道具'}" @click="selectRadio('daojuleixing','加成道具')"
                                                        >加成道具</a
                                                    >
                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '卡类'}" @click="selectRadio('daojuleixing','卡类')">卡类</a>
                                                    <a href="javascript:;" :class="{active:search.daojuleixing == '其它'}" @click="selectRadio('daojuleixing','其它')">其它</a>
                                                </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="label">所属游戏</td>
                                            <td>
                                                <p class="search-radio">
                                                    <a href="javascript:;" @click="selectRadio('suoshuyouxi','')" :class="{active:!search.suoshuyouxi}">全部</a>

                                                    <a
                                                        href="javascript:;"
                                                        v-for="r in mapyouxixinxi2"
                                                        @click="selectRadio('suoshuyouxi',r.id)"
                                                        :class="{active:search.suoshuyouxi == r.id}"
                                                        v-text="r.youximingcheng"
                                                    >
                                                    </a>
                                                </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <el-button type="success" @click="searchSubmit">搜索</el-button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </form>
                        </div>
                        <el-row :gutter="20">
                            <el-col :md="4" v-for="r in list">
                                <div class="floor_goods_wrap_li">
                                    <div class="floor_goods_wrap_b">
                                        <router-link :to="{path:'/shangpinxinxidetail',query:{id:r.id}}" class="floor_goods_img">
                                            <e-img-box :src="r.tupian" pb="70"></e-img-box>
                                        </router-link>
                                        <router-link
                                            :to="{path:'/shangpinxinxidetail',query:{id:r.id}}"
                                            class="floor_goods_tit"
                                            v-html="$substr(r.shangpinmingcheng,20)"
                                        ></router-link>
                                        <router-link
                                            :to="{path:'/shangpinxinxidetail',query:{id:r.id}}"
                                            class="floor_goods_txt"
                                            v-html="$substr(r.shangpinmiaoshu,20)"
                                        ></router-link>
                                        <router-link :to="{path:'/shangpinxinxidetail',query:{id:r.id}}" class="floor_goods_price"> ￥{{ r.jiage }}元 </router-link>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </e-module-model-box>
            </e-container>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss"></style>
<script>
    import api from "@/api";
    import { extend } from "@/utils/extend";
    import objectDiff from "objectdiff";

    /**
     * 后台列表页面
     */
    export default {
        data() {
            return {
                loading: false,
                list: [],
                search: {
                    shangpinbianhao: "",

                    youxifenlei: "",

                    suoshuyouxi: "",

                    daojuleixing: "",

                    shangpinmingcheng: "",

                    kucun_start: "",
                    kucun_end: "",

                    tupian: "",

                    jiage_start: "",
                    jiage_end: "",

                    faburen: "",

                    shangpinmiaoshu: "",
                },
                page: 1, // 当前页
                pagesize: 12, // 页大小
                totalCount: 0, // 总行数
                total: {},

                mapyouxifenlei1: [],
                mapyouxixinxi2: [],
            };
        },
        watch: {},
        computed: {},
        methods: {
            searchSubmit() {
                this.loadList(1);
            },
            loadList(page) {
                // 防止重新点加载列表
                if (this.loading) return;
                this.loading = true;
                this.page = page;
                // 筛选条件
                var filter = extend(true, {}, this.search, { page: page + "", pagesize: this.pagesize + "" });
                var diff = objectDiff.diff(filter, this.$route.query);
                if (diff.changed != "equal") {
                    // 筛选的条件不一致则更新链接
                    this.$router.replace({
                        // 更新query
                        path: this.$route.path,
                        query: filter,
                    });
                }
                this.$post(api.shangpinxinxi.weblist, filter)
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
            selectRadio(target, name) {
                this.search[target] = name;
                this.searchSubmit(1);
            },
        },
        beforeRouteUpdate(to, form, next) {
            var search = extend(this.search, to.query);
            if (search.page) {
                this.page = Math.floor(to.query.page);
                delete search.page;
            }
            if (search.pagesize) {
                this.pagesize = Math.floor(to.query.pagesize);
                delete search.pagesize;
            }
            this.loadList(1);
            next();
        },
        created() {
            var search = extend(this.search, this.$route.query);
            if (search.page) {
                this.page = Math.floor(this.$route.query.page);
                delete search.page;
            }
            if (search.pagesize) {
                this.pagesize = Math.floor(this.$route.query.pagesize);
                delete search.pagesize;
            }
            this.loadList(this.page);
        },
        mounted() {},
        destroyed() {},
    };
</script>
